import 'package:flutter/material.dart';
import 'package:popover/popover.dart';
import 'package:website.core/core/presentation/theme/theme.dart';
import 'package:website.core/core/presentation/widgets/app_button.dart';

const _kActionTileHeight = 50.0;

class HeaderActionDialogItem {
  const HeaderActionDialogItem({
    required this.icon,
    required this.title,
    required this.onPressed,
  });

  final Widget icon;
  final String title;
  final VoidCallback onPressed;
}

Future<void> showHeaderActionDialog({
  required BuildContext context,
  required List<HeaderActionDialogItem> items,
  double arrowDyOffset = 0.0,
}) async {
  await showPopover(
    context: context,
    bodyBuilder: (context) {
      return _HeaderActionDialog(
        items: items,
      );
    },
    radius: 12,
    direction: PopoverDirection.bottom,
    barrierColor: Colors.transparent,
    backgroundColor: CoreTheme.of(context).headerActionDialogBackgroundColor,
    barrierDismissible: true,
    width: 230,
    height: _kActionTileHeight * items.length,
    arrowHeight: 15,
    arrowWidth: 30,
    arrowDyOffset: arrowDyOffset,
    transitionDuration: Duration.zero,
  );
}

class _HeaderActionDialog extends StatelessWidget {
  const _HeaderActionDialog({
    required this.items,
    Key? key,
  }) : super(key: key);

  final List<HeaderActionDialogItem> items;

  @override
  Widget build(BuildContext context) {
    final widgets = items.map((item) {
      return Expanded(
        child: _HeaderActionDialogAction(
          item: item,
        ),
      );
    }).toList();

    return Column(
      children: widgets,
    );
  }
}

class _HeaderActionDialogAction extends StatelessWidget {
  const _HeaderActionDialogAction({
    required this.item,
    Key? key,
  }) : super(key: key);
  final HeaderActionDialogItem item;

  @override
  Widget build(BuildContext context) {
    return AppButton(
      padding: const EdgeInsets.symmetric(
        vertical: 12,
      ),
      pressedOpacity: 0.6,
      onPressed: () {
        Navigator.of(context).pop();
        item.onPressed();
      },
      child: Row(
        children: [
          const SizedBox(
            width: 10,
          ),
          SizedBox(
            height: 40,
            width: 40,
            child: Center(
              child: item.icon,
            ),
          ),
          const SizedBox(
            width: 10,
          ),
          Text(
            item.title,
            style: CoreTheme.of(context).textTheme.headerUserActionDialogActionTileTitle,
          ),
        ],
      ),
    );
  }
}
